<template>
  <div>
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar title="销售记录" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>
    <div style="display: flex;background-color: white;height: 45px;padding-top: 2px;padding-left: 5px;">
      <nut-searchbar placeholder="客户或商品关键字" v-model="state.searchModel.keyWord" @search="quickSearch" @clear="quickSearch">
        <template #rightout>
          <div style="padding-top:5px;">
            <nut-space>
              <Search2 @click="quickSearch"></Search2>
              <MoreX style="margin-left:20px;" @click="openAdvFilter"></MoreX>
            </nut-space>
          </div>

        </template>
      </nut-searchbar>
    </div>
    <div style="padding: 5px;height: calc(100vh - 125px);overflow: auto;" >
      <fresh-load @action="action" ref="freshRef" :search-model="state.searchModel" url="app/getSaleList">
        <div v-for="(item,index) in state.list" :key="index" class="item" >
          <div class="buName" @click="todetail(item)">
            <div style="flex: 1;font-weight: bold;font-size: 16px;color: #6b6d71;">{{item.buName}}</div>
            <div style="color: #6b6d71;font-size: 13px;">{{item.billDate}}</div>
            <div style="margin-left:10px;">
              <ArrowRight></ArrowRight>
            </div>
          </div>
          <div style="display: flex;">
            <div style="flex:1;">
              <div style="font-size: 13px;color: #6b6d71;padding: 5px 0;">地址:{{item.address}}</div>
              <div style="font-size: 14px;padding: 5px 0;color: #2c6eb2;">{{item.billNo}}</div>
              <div style="font-size: 15px;color: #6b6d71;" :class="[item.billState]">
                <nut-space>
                  <div style="font-size: 14px;color: #6b6d71;margin-right: 20px;" :class="[item.billState]">{{item.billStateName}}</div>
                  <div style="font-size: 14px;color: #6b6d71;margin-right: 20px;" :class="[item.printState]">{{item.printState}}</div>
                  <div style="font-size: 14px;color: #6b6d71;" :class="[item.billState]">{{item.skState}}</div>
                </nut-space>
              </div>
            </div>
            <div style="font-size: 16px;color: #c45656;padding-top: 30px;">￥{{item.amount}}</div>
          </div>
          <div v-if="item.remark">
            <nut-tag color="grey">{{item.remark}}</nut-tag>
          </div>
          <div style="display: flex;margin-top: 5px;font-size: 11px;color: #6d7882;">
            <nut-space>
              <div>制单：{{item.cbyName}}</div>
              <div>业务：{{item.salesName}}</div>
            </nut-space>
            <div style="flex:1;text-align:right;">
              <nut-button size="small" v-if="item.billState==='draft'" @click="alt(item)">修改</nut-button>
            </div>
          </div>
        </div>
      </fresh-load>
    </div>
    <advFilter ref="filterRef" @doSearch="doAdvSearch" />

  </div>
</template>
<script setup>
// 零售
import tool from "@/utils/tool";
import {useGlobal} from "@/stores/useGlobal";
import advFilter from "@/views/sale/advFilter.vue"
import {ArrowRight, Scan2, Search2, MoreX} from '@nutui/icons-vue';
import {computed, onBeforeMount, reactive, ref} from "vue";
import FreshLoad from "@/components/freshLoad.vue";
import {useRouter} from "vue-router";
const router = useRouter()
const global = useGlobal()
const filterRef = ref(null)
const state = reactive({
  showDetail: false,
  list: [],
  searchModel: {
    searchType: 'quick',
    keyWord: '',
  },
  currentSearchModel:{},// 当前搜索条件
  billNo: ''
})
const freshRef = ref(null)

const hei = computed(() => {
  return window.innerHeight - 125
})
const toolbarHei = computed(() => {
  return global.statusBarHeight
})
const clickLeft = () => {
  router.go(-1)
}
const alt = (item) => {
  if(item.billState === 'draft') {
    router.push({name: 'orderalt', query: {billNo: item.billNo}})
  }
}
// 弹出高级搜索
const openAdvFilter = () => {
  filterRef.value.open()
}
// 点击查看详情
const todetail = (item) => {
  // state.billNo = item.billNo
  // state.showDetail = true
  router.push({name: 'orderdetail', query:{billNo: item.billNo}})
}
// 弹出票据明细
const diaOpened = () => {
  setTimeout(() => {
    //state.refs.detailRef.getList(state.billNo)
  }, 100)
}
// 快速搜索
const quickSearch = () => {
  state.searchModel.currentPage = 1
  state.list = []
  state.searchModel.searchType = 'quick'
  getList()
}
const doAdvSearch = (model) => {
  state.searchModel.searchType = 'adv'
  state.searchModel = Object.assign(state.searchModel, model)
  getList()
}
const action = (arr) => {
  state.list = arr
}
const getList = () => {
  freshRef.value.getList()
}


</script>

<style scoped lang="scss">
.item {
  margin-bottom: 10px;
  background-color: white;
  padding: 10px;
  border-radius: 6px;
  .buName {
    display: flex;border-bottom: 1px solid rgba(0,0,0,0.05);padding: 3px 0;
    &:active {
      background-color: rgba(0,0,0,0.06);
    }
  }

}
:deep(.el-dialog__body) {
  padding: 0 !important;
}
.draft {
  color: #0bc15f !important;
}
.accounted {
  color: #1e9fff !important;
}

</style>